<div class="m-subheader">
	<div class="d-flex align-items-center">
		<div class="mr-auto">
			<h3 class="m-subheader__title m-subheader__title--separator">
				PrimeNG
			</h3>
			<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
				<li class="m-nav__item m-nav__item--home">
					<a href="#" class="m-nav__link m-nav__link--icon">
						<i class="m-nav__link-icon la la-home"></i>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a  class="m-nav__link">
						<span class="m-nav__link-text">
							PrimeNG
						</span>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a  class="m-nav__link">
						<span class="m-nav__link-text">
							Input
						</span>
					</a>
				</li>
			</ul>
		</div>
		<div>
			<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
				<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--outline-2x m-btn--air m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
					<i class="la la-plus m--hide"></i>
					<i class="la la-ellipsis-h"></i>
				</a>
				<div class="m-dropdown__wrapper">
					<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
					<div class="m-dropdown__inner">
						<div class="m-dropdown__body">
							<div class="m-dropdown__content">
								<ul class="m-nav">
									<li class="m-nav__section m-nav__section--first m--hide">
										<span class="m-nav__section-text">
											Quick Actions
										</span>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-share"></i>
											<span class="m-nav__link-text">
												Activity
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-chat-1"></i>
											<span class="m-nav__link-text">
												Messages
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-info"></i>
											<span class="m-nav__link-text">
												FAQ
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-lifebuoy"></i>
											<span class="m-nav__link-text">
												Support
											</span>
										</a>
									</li>
									<li class="m-nav__separator m-nav__separator--fit"></li>
									<li class="m-nav__item">
										<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
											Submit
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
	<div class="alert alert-brand m-alert m-alert--icon m-alert--air m-alert--square m--margin-bottom-30" role="alert">
		<div class="m-alert__icon">
			<i class="flaticon-exclamation-1"></i>
		</div>
		<div class="m-alert__text">
			<b>PrimeNG</b> is an open source collection of rich UI components for Angular. Here are some components from PrimeNG.
			For more info please check out <a class="m-link m-link--warning m--font-bold" href="https://www.primefaces.org/primeng/#/" target="_blank">the official documentation.</a>
		</div>
		<div class="m-alert__close">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-6">
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Input Group
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<div class="m-section__sub">Addons</div>
							<div class="ui-g ui-fluid">
								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
										<input type="text" pInputText placeholder="Username">
									</div>
								</div>
								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<span class="ui-inputgroup-addon">$</span>
										<input type="text" pInputText placeholder="Price">
										<span class="ui-inputgroup-addon">.00</span>
									</div>
								</div>
								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<span class="ui-inputgroup-addon">www</span>
										<input type="text" pInputText placeholder="Website">
									</div>
								</div>
							</div>
							<div class="m-section__sub">Multiple Addons</div>
							<div class="ui-g">
								<div class="ui-g-12">
									<div class="ui-inputgroup">
										<span class="ui-inputgroup-addon"><i class="fa fa-credit-card"></i></span>
										<span class="ui-inputgroup-addon"><i class="fa fa-cc-visa"></i></span>
										<input type="text" pInputText placeholder="Price">
										<span class="ui-inputgroup-addon">$</span>
										<span class="ui-inputgroup-addon">.00</span>
									</div>
								</div>
							</div>
							<div class="m-section__sub">Button Addons</div>
							<div class="ui-g ui-fluid">
								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<button pButton type="button" label="Search"></button>
										<input type="text" pInputText placeholder="Keyword">
									</div>
								</div>

								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<input type="text" pInputText placeholder="Keyword">
										<button pButton type="button" icon="fa-search" class="ui-button-secondary"></button>
									</div>
								</div>

								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<button pButton type="button" icon="fa-check" class="ui-button-success"></button>
										<input type="text" pInputText placeholder="Vote">
										<button pButton type="button" icon="fa-close" class="ui-button-danger"></button>
									</div>
								</div>
							</div>
							<div class="m-section__sub">Checkbox and RadioButton</div>
							<div class="ui-g ui-fluid">
								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<span class="ui-inputgroup-addon"><p-checkbox></p-checkbox></span>
										<input type="text" pInputText placeholder="Username">
									</div>
								</div>

								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<input type="text" pInputText placeholder="Price">
										<span class="ui-inputgroup-addon"><p-radioButton></p-radioButton></span>
									</div>
								</div>

								<div class="ui-g-12 ui-md-4">
									<div class="ui-inputgroup">
										<span class="ui-inputgroup-addon"><p-checkbox></p-checkbox></span>
										<input type="text" pInputText placeholder="Website">
										<span class="ui-inputgroup-addon"><p-radioButton></p-radioButton></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Select Button
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<div class="m-section__sub">Single</div>
							<p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>
							<p>Selected Type: {{selectedType}}</p>
							<div class="m-section__sub">Multiple</div>
							<p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
							<p>Selected Types: <span *ngFor="let type of selectedTypes">{{type}} </span></p>
							<hr/>
							<button type="button" (click)="clear()" pButton icon="fa-close" label="Clear"></button>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Color Picker
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<div class="m-section__sub">Inline</div>
							<p-colorPicker [(ngModel)]="color1" inline="true"></p-colorPicker>
							<p style="margin-top:.5em">Selected Color: <span
									style="display:inline-block;width:32px;height:32px;vertical-align:middle"
									[style.backgroundColor]="color1"></span> {{color1}} </p>
							<div class="m-section__sub">Overlay</div>
							<p-colorPicker [(ngModel)]="color2"></p-colorPicker>
							<p style="margin-top:.5em">Selected Color: <span [ngStyle]="{'color':color2}">{{color2}}</span></p>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
		</div>
		<div class="col-lg-6">
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Chips
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<div class="m-section__sub">
								Type something and press enter.
							</div>
							<div class="m-section__sub">Basic</div>
							<p-chips [(ngModel)]="chipValues1"></p-chips>
							<div class="m-section__sub">Template</div>
							<p-chips [(ngModel)]="chipValues2">
								<ng-template let-item pTemplate="item">
									{{item}} - (active) <i class="fa fa-user" style="margin-right:2em"></i>
								</ng-template>
							</p-chips>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Input Mask
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<div class="ui-g ui-fluid">
								<div class="ui-g-12 ui-md-6 ui-lg-4">
									<span>Basic</span>
									<p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>
								</div>
								<div class="ui-g-12 ui-md-6 ui-lg-4">
									<span>SSN</span>
									<p-inputMask mask="999-99-9999" [(ngModel)]="val2" placeholder="999-99-9999"></p-inputMask>
								</div>
								<div class="ui-g-12 ui-md-6 ui-lg-4">
									<span>Date</span>
									<p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
								</div>
								<div class="ui-g-12 ui-md-6 ui-lg-4">
									<span>Phone</span>
									<p-inputMask mask="(999) 999-9999" [(ngModel)]="val4" placeholder="(999) 999-9999"></p-inputMask>
								</div>
								<div class="ui-g-12 ui-md-6 ui-lg-4">
									<span>Phone Ext</span>
									<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
								</div>
								<div class="ui-g-12 ui-md-6 ui-lg-4">
									<span>Serial Number</span>
									<p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
								</div>
							</div>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Multi Select
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>
							<p>Selected Cars: {{selectedCars}}</p>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
		</div>
	</div>
</div>